<!DOCTYPE html>
<html>
<head>
    <title>EaselJS Example: Transform</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

    <script src="./assets/preloadjs-NEXT.min.js"></script>

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<script type="text/javascript" src="../src/easeljs/filters/ColorMatrix.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/ColorMatrixFilter.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->


    <link type="text/css" href="./assets/css/dark-hive/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="./js/SimpleScroller.js"></script>

    <script type="text/javascript">
        var manifest;
        var stage;
        var canvas;
        var imageContainer;
        var images;
        var loader;
        var image_width;
        var image_height;
        var slider;

        function init() {
        	if (window.top != window) {
        		document.getElementById("header").style.display = "none";
        	}

	        document.getElementById("loader").className = "loader";

           canvas = document.getElementById('testCanvas');
           stage = new createjs.Stage(canvas);
           imageContainer = new createjs.Container();

           images = [];

           image_width = 149;
           image_height = 370;

            slider = new SimpleScroller(200, 50, "Amount");
            slider.x = canvas.width - slider.width;
            slider.max = 30;
            slider.min = -30;
            slider.addEventListener("change", handleChange);

            manifest = [
                {src:"./assets/image_1_1.png", id:"image0"},
                {src:"./assets/image_1_2.png", id:"image1"},
                {src:"./assets/image_1_3.png", id:"image2"},
                {src:"./assets/image_1_4.png", id:"image3"}

            ];

            loader = new createjs.LoadQueue(false);
            loader.addEventListener("fileload", handleFileLoad);
			loader.addEventListener("complete", handleComplete);
            loader.loadManifest(manifest);

            stage.addChild(imageContainer);
            stage.addChild(slider);
            createjs.Ticker.addEventListener("tick", tick);
        }

        function stop() {
	        createjs.Ticker.removeEventListener("tick", tick);
        }

        function handleFileLoad(event) {
            images.push(event.item);
        }

        function handleComplete() {
	        document.getElementById("loader").className = "";
            var l = images.length;
            for(var i=0;i<l;i++) {
                var id = images[i].id;
                var bmp = new createjs.Bitmap(loader.getResult(id));
                imageContainer.addChild(bmp);
            }
            displayImages();
        }

        function displayImages() {
            var l = images.length;
            for(var i=0;i<l;i++) {
                var bmp = imageContainer.getChildAt(i);
                bmp.cache(0,0, image_width, image_height);
                bmp.x = (image_width) * i;
                bmp.snapToPixel = true;
            }

            imageContainer.x = canvas.width - (image_width*l) >> 1;
            imageContainer.y = canvas.height - image_height >> 1;

            stage.update();
        }

        function show(value) {

        }

        function transformImage(value) {
            if (value == 0) { return; }
            var l = images.length;
            for(var i=0;i<l;i++) {
                var bmp1 = imageContainer.getChildAt(i);

                if (i%2) {
                    bmp1.skewY = value;
                } else {
                    bmp1.skewY = -1*value;
                    bmp1.y = -(150) * Math.sin(bmp1.skewY/180*Math.PI)
                }

                bmp1.x = ((image_width - 1)*i) * Math.cos(bmp1.skewY/180*Math.PI);
                bmp1.filters = [getColorMatrixFilter(bmp1.skewY)];
                bmp1.snapToPixel = true;
                bmp1.updateCache();
            }

            var _scale = (value > 0) ? 1/value * 20 : -1*(1/value * 20);
            imageContainer.rotation = (value > 0) ? value>>1 : - 1*value>>1;
            imageContainer.scaleX = imageContainer.scaleY = (_scale <= 1) ? _scale : 1;

            imageContainer.x = canvas.width - (image_width*l) >> 1;
            imageContainer.y = canvas.height - image_height >> 1;

            stage.update();
        }

        function getColorMatrixFilter(value) {
            var cm = new createjs.ColorMatrix();
            cm.adjustBrightness(value*0.75);
            return new createjs.ColorMatrixFilter(cm);
        }

        function handleChange(event) {
            var target = event.target;
            transformImage(target.value);
        }

        function tick(event) {
            stage.update(event);
        }

        function touchstart(event) {
            //alert(event);

            if (event.target.localName != "select") {
                event.preventDefault();
            }

        }

    </script>
	<link rel="stylesheet" href="assets/demoStyles.css"/>

</head>
<body onload="init()" ontouchstart="touchstart(this)" style="-webkit-tap-highlight-color: rgba(0,0,0,0);">

	<div id="loader"></div>

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Transformation</h1>
	    <p>This sample shows transformations, including skews. Drag the slider to affect the skew amount.</p>
	</header>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</body>
</html>